<template>
        <div style="border: 1px solid #ccc">
                <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                        :mode="mode"
                />
                <Editor
                        style="height: 500px; overflow-y: hidden;"
                        v-model="props.content"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="handleCreated"
                        @onChange ="handleChange"
                />
        </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted,nextTick} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import request from '@/utils/request.js'
import {ElMessage} from 'element-plus'
let props = defineProps(['content','placeholder','toolbar'])
let emits = defineEmits(['setContent'])
let mode = ref("default")
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const toolbarConfig = {
    toolbarKeys: [
        // 一些常用的菜单 key
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        // 'uploadVideo',//上传视频
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        // 'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        // 'fullScreen' // 全屏
    ]
}
const editorConfig = {
        placeholder: '请输入内容...',
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor
    let config = editor.getConfig()

    config.MENU_CONF['uploadImage'] = {
        server: '/api/common/upload/cases',
        fieldName: 'file',
        onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res)
        },
        onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res)
        },
        onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res)
        },
        customInsert(res, insertFn) {
            insertFn(res.data)
        },
    }
}
const handleChange = (editor) => {
        emits("setContent", editor.getHtml())
}

</script>

<style scoped>

</style>